function $(el){
    return document.querySelector(el)
};
function gets(el){
    return [...document.querySelectorAll(el)]
};

let box = $('.box'),
    inps = gets('.ipt_box input'),
    pEles = gets('.ipt_box p'),
    text = $('#text'),
    items = gets('.item'),
    testRight = $('.test_right'),
    btn_box = $('.btn_box'),
    tests,
    contain = [false,false,false,false,false]
// 鼠标滑过变红
items.forEach((item,id)=>{
    item.addEventListener('mouseover',(e)=>{
        item.classList.add('focus')
    });
    item.addEventListener('mouseout',(e)=>{
        item.classList.remove('focus')
    })
})
// 聚焦

let data =['请填写申请人的手机号码','',
           '支持中文、英文、数字、"_""和"-""的组合，4-20位',
            '建议字母、数字和符号，任意2种的组合，8-20位']
inps.forEach((inp,idx)=>{
    inp.addEventListener('focus',(e)=>{
        let tip = pEles[idx];
        tip.classList.add('show')
        tip.innerHTML = data[idx]
        tip.style.color = '#999' 
    });
    inp.addEventListener('input',(e)=>{
        checkValue(inp,idx)
    })
    inp.addEventListener('blur',(e)=>{
        let tip = pEles[idx];
        if(idx === 3 ){
            if(contain[3] === true){
                let reg1 = /^[a-zA-Z]{8,20}$/,
                reg2 = /^[\d]{8,20}$/,
                val = $('#pwd').value.trim()
                if(reg1.test(val) || reg2.test(val)){
                    tip.innerHTML = '密码包含简单或重复的字符串，建议重新设置密码',
                    tip.classList.add('show')
                }else{
                    tip.innerHTML = '您的密码防护程度强',
                    tip.classList.add('show')
                    tip.classList.add('ok')
                }
            }
        }else{
            tip.classList.remove('show')
        }
        
    })
})
let datas  = ['格式有误','验证码错误','长度只能在4-20个字符之间','请将密码设置为8-20位,并且由字母,数字和符号两种以上组合']
// 封装input内容判断函数
function checkValue(inp,index){
    let val = inp.value.trim(),
        rs,
        reg,
        tip = pEles[index],
        i
    switch(inp.id){
        case 'iphone':
            reg = /^1[^012]\d{9}$/;
            i = inp.nextElementSibling;
        break;
        case 'test':
            reg = /^[\d]{4}/
        break;
        case 'user':
            reg = /[\w\u4e00-\u9fa5]{4,20}/;
        break;
        case 'pwd':
            reg = /^[\d\w!@#\$%\^\&\*\+=~]{8,20}$/;
        break;
    }
    if(reg.test(val)){
        rs = true
        tip.classList.remove('show')
        contain[index] = true
        if(inp.id === 'iphone') i.classList.add('show')
    }else{
        rs = false;
        tip.classList.add('show');
        tip.style.color = 'red'
        tip.innerHTML = datas[index]
        if(inp.id === 'iphone') i.classList.remove('show')
    }
}

$('#ispwd').onclick = function(){
    pwd.type = pwd.type === 'password'? 'text' : 'password';
    $('#ispwd').classList.toggle('ok')
}
testRight.addEventListener('click',(e)=>{
    let time = 60,
        iphone = $('#iphone').nextElementSibling;
    if(iphone.classList.contains('show')){
        tests = 6666
        timer = setInterval(function(){
            if(time<=0){
                clearInterval(timer);
                testRight.classList.remove('time');
                testRight.innerHTML = '获取验证码'
                return
            }
            time--;
            testRight.innerHTML = `${time}秒后重新获取`
            testRight.classList.add('time')
        },1000)
    }else{
        $('#iphone').parentNode.classList.add('focus')
        pEles[0].classList.add('show')
    } 
})
btn_box.addEventListener('click',(e)=>{
    let val = inps[1].value.trim()*1,
        rs ;
    contain[1] = val === tests?  true : false;
    contain[4] = $('#check').checked?  true : false;
    rs = contain.every((item)=> item === true)
    if(rs){
        location.href = './register.html';
        return;
    }else{
        let id = contain.indexOf(false)
        if(id !== 4){
            pEles[id].classList.add('show');
            pEles[id].innerHTML = datas[id];
            pEles[id].style.color = 'red';
            inps[id].parentNode.classList.add('focus');
        }
    }
})
